<template>
    <div class="collectgambit">
        <div class="collectgambit-head">
        <router-link to="/user"> 
            <div class="img">
                <img src="../../images/icon_bangding_01.png" alt="">
            </div>
        </router-link> 
                <h2>{{msg}}</h2>            
        </div>
        
        <div class="nav">
            <router-link to="collectgambit">
                <div class="nav_left">话题</div>
            </router-link>
            <router-link to="collectproduct">
                <div class="nav_center">产品</div>
            </router-link>
            <router-link to="collectvideo">
                <div class="nav_right">视频</div>
            </router-link>
        </div>
        <div class="content">
            <div class="content_top">
                <div class="content_top_left">
                    <img src="../../images/IMG_shangpingye_01.png" alt="">
                    <div class="text">
                        PAUL&JOE 双色腮红
                    </div>
                    <div class="text_2">
                        <h1>参考价：¥230</h1>
                        <div>
                            <img src="../../images/icon_wofaqide_talk.png" alt="">
                            <h2>221</h2>
                        </div>
                    </div>
                </div>
                <div class="content_top_right">
                    <img src="../../images/IMG_shangpingye_02.png" alt="">
                    <div class="text">
                        MAYSU三色唇颊两用胭脂
                    </div>
                    <div class="text_2">
                        <h1>参考价：¥130</h1>
                        <div>
                            <img src="../../images/icon_wofaqide_talk.png" alt="">
                            <h2>236</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content_top">
                <div class="content_top_left">
                    <img src="../../images/IMG_shangpingye_03.png" alt="">
                    <div class="text">
                        MAKE UP FOR EVER 单色腮红
                    </div>
                    <div class="text_2">
                        <h1>参考价：¥350</h1>
                        <div>
                            <img src="../../images/icon_wofaqide_talk.png" alt="">
                            <h2>455</h2>
                        </div>
                    </div>
                </div>
                <div class="content_top_right">
                    <img src="../../images/IMG_shangpingye_04.png" alt="">
                    <div class="text">
                        魔焰精灵蔷薇腮红
                    </div>
                    <div class="text_2">
                        <h1>参考价：¥170</h1>
                        <div>
                            <img src="../../images/icon_wofaqide_talk.png" alt="">
                            <h2>252</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
           
     <div class="footer">到底啦~</div>

         
    </div>
</template>
<script>
    export default{
        name:'collectgambit',
        data(){
            return{
                msg:'收藏'
            }
        }       
    }
</script>

<style lang='less' scoped>
.collectgambit-head{
    height:80/75rem;
    background:#FF406F;
    margin-bottom:33/75rem;
}
.collectgambit-head h2{
    float:right;
    font-size:36/75rem;
    line-height:80/75rem;
    color:#fff;
    margin-right:340/75rem;
}
.collectgambit-head .img{
    float:left;
    height:36/75rem;
}
.collectgambit-head .img img{
    float:left;
    margin-left:20/75rem;    
    margin-top:26/75rem;
}
.nav{
    width:650/75rem;
    height:36/75rem;
    margin:0 auto;
    font-size:26/75rem;
    text-align:center;
    line-height:36/75rem;
}
.nav_left{
    width:215/75rem;
    height:36/75rem;
    float:left;
    border-right:1px solid #808080;
}
.nav_center{
    width:215 /75rem;
    height:36/75rem;
    float:left;
    border-left:1px solid #808080;
    border-right:1px solid #808080;

}
.nav_right{
    width:213/75rem;
    height:36/75rem;
    float:left;
    border-left:1px solid #808080;
}
.content{
    width:650/75rem;
    margin:0 auto;
}
.content_top{
    width:650/75rem;
    height:315/75rem;
    border-radius:10px;
    box-shadow:0 0 10px #D3C3C3;
    background:#fff;
    margin-top:22/75rem;
}
.content_top_left{
    float:left;
    width:315/75rem;
    height:315/75rem;
}
.content_top_right{
    float:right;
    width:315/75rem;
    height:315/75rem;
}
.text{
    height:40/75rem;
    font-size:18/75rem;
    margin-left:16/75rem;
}
.text_2{
    margin-left:16/75rem;
    height:40/75rem;
    font-size:18/75rem;
}
.text_2 h1{
    float:left;
}
.text_2 img{
    float:left;
    margin-left:100/75rem;
    margin-right:5/75rem;
    
}
.text_2 h2{
    float:left;
}
.footer{
    width:750/75rem;
    text-align:center;
    font-size:24/75rem;
    margin-top:40/75rem;

}
</style> 

